<template>
  <div class="container">
    <div class="head">
      <a-row>
        <a-col :span="3" class="logo">
          <a href="/">
            <img src="../../assets/head-logo.svg" alt="">
          </a>
        </a-col>

        <a-col :span="16" class="nav">
          <a-row>
            <a-col :span="3"><a href="/">免费课</a></a-col>
            <a-col :span="3"><a href="/">轻课</a></a-col>
            <a-col :span="3"><a href="/">学位课</a></a-col>
            <a-col :span="3"><a href="/">题库</a></a-col>
            <a-col :span="3"><a href="/">教育</a></a-col>
          </a-row>
        </a-col>

        <a-col :span="5">
          <a-row>
            <a-col :span="9" class="cart-ico">
              <a href="/">
                <b class="goods-number">0</b>
                <img src="../../assets/cart.svg" alt="">
                <span>购物车</span>
              </a>
            </a-col>
            <a-col :span="8">
              <a href="#">学习中心</a>
            </a-col>
            <a-col :span="7" class="member">
              <a-dropdown>
                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                  <img src="../../assets/logo@2x.png" alt="">
                  <a-icon type="down"/>
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a href="javascript:;">我的账户</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">我的订单</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">我的优惠券</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">退出登录</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>

            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style scoped>
  .container {
    width: 100%;
    height: 80px !important;
    /*background-color: red;*/
  }

  .head {
    padding-top: 22px;
  }

  .logo {
    padding-left: 10px;
  }

  .nav a {
    display: block;
    text-align: center;
    padding-bottom: 16px;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    font-size: 16px;

  }

  .goods-number {
    width: 16px;
    height: 16px;
    line-height: 17px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #fa6240;
    border-radius: 50%;
    transform: scale(.8);
    position: absolute;
    left: 16px;
    top: -1px;
  }

  .cart-ico span {
    margin-left: 12px;
  }

  .cart-ico {
    /*position: absolute;*/
    width: 80px;
    margin-right: 15px;
    border-radius: 17px;
  }

  .cart-ico:hover {
    background: #f0f0f0;
  }

  .member img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-block;
  }

  .member img:hover {
    border: 1px solid yellow;
  }
</style>
